<template>
  <div class="edit-work-table-container">
    <BaseDialog :config="dialogConfig" :callback="dialogCallback">
      <div class="remak">
        <span>别名</span>
        <el-input
          style="flex:1;margin-left:10px;"
          placeholder="请输入别名"
          size="mini"
          v-model="alias"
        >
        </el-input>
      </div>
      <div class="remak">
        <span>备注</span>
        <el-input
          type="textarea"
          :rows="2"
          style="flex:1;margin-left:10px;"
          placeholder="请输入备注信息"
          size="mini"
          v-model="remark"
        >
        </el-input>
      </div>

      <el-table
        :data="tableData"
        height="367"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        style="width: 100%;"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="原字段名" width="180">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column prop="new_name" label="新字段名" width="180">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.new_name"
              size="mini"
              clearable
              placeholder="请输入新字段名"
            >
            </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="value_type" label="字段类型" width="180">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.value_type"
              size="mini"
              clearable
              placeholder="请选择字段类型"
            >
              <el-option
                v-for="item in tableType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="column_desc" label="字段描述">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.column_desc"
              type="textarea"
              :rows="1"
              placeholder="请输入字段描述"
              size="mini"
            >
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </BaseDialog>
  </div>
</template>

<script>
import { mapList } from '@/api/report/common'
import BaseDialog from '@/views/report/Components/Dialog/index'
import * as workTable from '@/api/report/workTable'
export default {
  data() {
    return {
      map: {},
      dialogConfig: {
        title: `配置工作表(${this.table_name})`,
        show: true,
        size: 'big'
      },

      tableData: [],
      alias: '',
      remark: '',
      multipleSelection: []
    }
  },
  props: ['work_table_id', 'table_name'],
  created() {
    this.getReview()
    this.getMapConfig()
  },
  mounted() {},
  computed: {
    tableType() {
      return this.map['table_column.value_type']
    }
  },
  watch: {},
  components: {
    BaseDialog
  },
  methods: {
    getMapConfig() {
      mapList({
        types: [
          'table_column.value_type',
          'report.calc_type',
          'report.number.operation_type',
          'report.sort_type',
          'report.datetime.unit',
          'analysis.type',
          'status',
          'event.type',
          'event.tags',
          'event.list',
          'page.type',
          'page.list',
          'widget.type'
        ]
      })
        .then(data => {
          this.map = Object.assign({}, this.map, data.data)
        })
        .catch(error => {
          console.error(error)
        })
    },
    close() {
      this.$emit('close')
    },

    // 第一次设置多选选中
    setMultipleSelection() {
      this.tableData.filter(item => {
        if (item.is_show === '1') {
          this.$refs.multipleTable.toggleRowSelection(item)
        }
      })
    },

    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 获取提交数据
    getSubmitData() {
      let table_columns = []
      let multipleIds = this.multipleSelection.map(item => {
        return item.table_column_id
      })

      this.tableData.map(item => {
        if (multipleIds.includes(item.table_column_id)) {
          table_columns.push({
            table_column_id: item.table_column_id,
            new_name: item.new_name,
            column_desc: item.column_desc,
            is_show: '1',
            value_type: item.value_type
          })
        }
      })

      return {
        work_table_id: this.work_table_id,
        remark: this.remark,
        alias: this.alias,
        table_columns: table_columns
      }
    },

    dialogCallback(action, done) {
      if (action === 'Confirm') {
        this.create(done)
      } else {
        this.close()
      }
    },

    getReview() {
      workTable
        .workTable({ work_table_id: this.work_table_id })
        .then(({ data }) => {
          let { table_columns = [], remark, alias } = data || {}
          this.tableData = table_columns
          this.remark = remark
          this.alias = alias
          this.$nextTick(() => {
            this.setMultipleSelection()
          })
        })
        .catch(error => {
          this.$message.error(error)
        })
    },

    // 创建
    create(done) {
      workTable
        .update(this.getSubmitData())
        .then(response => {
          done()
          this.close()
        })
        .catch(error => {
          this.$message.error(error)
        })
    }
  }
}
</script>

<style lang="scss"></style>
